<template>
  <lay-container :fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <template v-slot:title>
            <lay-button type="primary" @click="openEditLayer">新建项目</lay-button>
          </template>
          <template v-slot:extra>
            <div style="display: flex">
              <lay-input style="width:100%"></lay-input>
              <lay-button type="primary">查询</lay-button>
              <lay-button>重置</lay-button>
            </div>
          </template>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <lay-row :space="10">
            <lay-col :md="6" v-for="(item, index) in dataSource" :key="index">
              <lay-card class="card-list-item">
                <div class="cardbody">
                  <div class="icon-right">
                    <img class="icon" src="../../assets/console/java.svg"/>
                    <lay-icon type="layui-icon-circle-dot" :color="item.deployState?'#16b777':'#c2c2c2'"
                              size="24px"></lay-icon>
                  </div>
                  <h2 style="font-size: 30px;">{{ item.name }}</h2>
                  <span>部署地址：{{ item.serverPath }}</span>
                </div>
                <template #footer>
                  <div class="button-list">
                    <div>
                      <lay-tooltip content="编辑">
                        <lay-icon type="layui-icon-survey" @click="openEditLayer(item.connectId)"></lay-icon>
                      </lay-tooltip>
                    </div>
                    <!--                    <div>-->
                    <!--                      <lay-tooltip content="拉取代码">-->
                    <!--                        <lay-icon type="layui-icon-upload-drag" onclick="" lay-tips="部署"></lay-icon>-->
                    <!--                      </lay-tooltip>-->
                    <!--                    </div>-->
                    <div>
                      <lay-tooltip content="部署">
                        <lay-icon type="layui-icon-upload-drag" onclick="" lay-tips="部署"></lay-icon>
                      </lay-tooltip>
                    </div>
                    <div>
                      <lay-tooltip content="仅重启">
                        <lay-icon type="layui-icon-refresh" onclick="" lay-tips="仅重启"></lay-icon>
                      </lay-tooltip>
                    </div>
                    <div>
                      <lay-tooltip content="查看日志">
                        <lay-icon type="layui-icon-list" onclick="" lay-tips="查看日志"></lay-icon>
                      </lay-tooltip>
                    </div>
                  </div>
                </template>
              </lay-card>
            </lay-col>
          </lay-row>
        </lay-card>
      </lay-col>
    </lay-row>
    <lay-layer v-model="dialogVisible" :shade="false" :area="['1000px','600px']" btnAlign="c">
      <div style="padding: 20px;">
        <lay-form :model="form" ref="layFormRef" label-width="100px" required>
          <lay-row space="10">
            <!--            本地源码信息-->
            <lay-col md="12">
              <lay-form-item label="项目类型">
                <lay-select v-model="form.typeName">
                  <lay-select-option :value="'java'">Java</lay-select-option>
                  <lay-select-option :value="'vue'">Vue</lay-select-option>
                  <lay-select-option :value="'nginx'">Nginx</lay-select-option>
                </lay-select>
              </lay-form-item>
              <lay-form-item label="项目名称" prop="name">
                <lay-input v-model="form.name"></lay-input>
              </lay-form-item>
              <lay-form-item label="克隆地址" prop="gitUrl">
                <lay-input v-model="form.gitUrl"></lay-input>
              </lay-form-item>
              <lay-form-item label="git账号" prop="gitUser">
                <lay-input v-model="form.gitUser"></lay-input>
              </lay-form-item>
              <lay-form-item label="git密码" prop="gitPassword">
                <lay-input v-model="form.gitPassword"></lay-input>
              </lay-form-item>
              <lay-form-item label="分支名称" prop="branch">
                <lay-input v-model="form.branch"></lay-input>
              </lay-form-item>
              <lay-form-item label="本地代码路径" prop="localPath">
                <lay-input v-model="form.localPath"></lay-input>
              </lay-form-item>
              <lay-form-item v-if="form.typeName === 'java'" label="程序包名">
                <lay-input v-model="form.jarName" data-placement="jar包名或tar包名"></lay-input>
              </lay-form-item>
            </lay-col>
            <!--            服务器信息-->
            <lay-col md="12">
              <lay-form-item label="服务器地址ip" prop="serverHost">
                <lay-input v-model="form.serverHost"></lay-input>
              </lay-form-item>
              <lay-form-item label="服务器端口号" prop="serverPort">
                <lay-input v-model="form.serverPort"></lay-input>
              </lay-form-item>
              <lay-form-item label="服务器账号" prop="username">
                <lay-input v-model="form.username"></lay-input>
              </lay-form-item>
              <lay-form-item label="服务器密码" prop="password">
                <lay-input v-model="form.password"></lay-input>
              </lay-form-item>
              <lay-form-item label="部署根目录" prop="serverPath">
                <lay-input v-model="form.serverPath"></lay-input>
              </lay-form-item>
              <lay-form-item v-if="form.typeName === 'java'" label="执行的命令">
                <lay-input v-model="form.exec"></lay-input>
              </lay-form-item>
              <lay-form-item v-if="form.typeName === 'java'" label="端口号">
                <lay-input v-model="form.projectPort"></lay-input>
              </lay-form-item>
              <lay-form-item label="日志目录" prop="logPath">
                <lay-input v-model="form.logPath"></lay-input>
              </lay-form-item>
            </lay-col>
          </lay-row>
        </lay-form>
        <div slot="footer" style="margin-left: 25rem;">
          <lay-button @click="syncCode" type="normal">同步代码</lay-button>
          <lay-button @click="saveForm" type="primary">保存</lay-button>
          <lay-button @click="cancelForm">取消</lay-button>
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>

<script lang="ts">
export default {
  name: "CardList",
};
</script>

<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue';
import http from '../../api/http';
import {layer} from '@layui/layui-vue';

const dialogVisible = ref(false);
const dataSource = ref(null);
const layFormRef = ref();

let form = reactive({
  gitUrl: '',
  gitUser: '',
  gitPassword: '',
  branch: '',
  deployState: false,
  typeName: '',
  logPath: '',
  createTime: '',
  deployTime: '',
  jarName: '', // 仅当项目类型为java时显示
  exec: '', // 仅当项目类型为java时显示
  projectPort: 0, // 仅当项目类型为java时显示
});

// 定义一个函数用于重新调用/index/list接口
const refreshList = () => {
  http.get('/index/list').then((response) => {
    dataSource.value = response.data;
  }).catch((error) => {
    console.error("刷新列表失败", error);
  });
};

onMounted(() => {
  // 页面加载时调用后端接口执行查询
  refreshList();
});

const openEditLayer = (id: String) => {
  if (!dialogVisible.value) {
    http.get('/index/info/' + id).then((response) => {
      console.log("项目信息", response);
      form = response.data;
      dialogVisible.value = true;
    });
  } else {
    dialogVisible.value = false;
  }
};

const saveForm = () => {
  layFormRef.value.validate((isValidate, model, errors) => {
    if (isValidate) {
      //判断是新增还是编辑
      if (model.connectId !== null && model.connectId != undefined) {
        http.post('/index/update', model).then((response) => {
          console.log(response.data); // 处理响应数据
          dialogVisible.value = false;
          refreshList(); // 新增或修改成功后刷新列表
        }).catch((error) => {
          console.error(error); // 处理错误
        });
      } else {
        http.post('/index/add', model).then((response) => {
          console.log(response.data); // 处理响应数据
          dialogVisible.value = false;
          refreshList(); // 新增或修改成功后刷新列表
        }).catch((error) => {
          console.error(error); // 处理错误
        });
      }
    }
  });
};

const cancelForm = () => {
  layer.confirm("取消操作", { shade: false });
  dialogVisible.value = false;
};

const syncCode = () => {
  // 在这里编写“同步代码”的逻辑
};
</script>

<style scoped>
.cardbody {
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: rgb(90, 180, 248);
}

.icon {
  width: 8rem !important;
}

.icon-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

:deep(.card-list-item .layui-card-body img) {
  width: 100%;
}

:deep(.card-list-item .layui-card-body) {
  padding: 0px !important;
}

.button-list {
  display: flex;
}

.button-list > div {
  flex: 1;
  text-align: center;
  color: #909399;
}

.button-list div:hover {
  cursor: pointer;
}
</style>
